<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <h2>DOM获取节点</h2>
        <ul class="first">
            <li id="1">NO.1</li>
            <li id="2">NO.2</li>
            <li id="3" a="a">
                <ul>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>   
            </li>
        </ul>
        <button>按钮</button>
    </div>
    <script>
        const ul = document.querySelector(".first")

        child = ul.childNodes
        child2 = ul.children

        console.log(child)
        console.log(child2)


        previousBro = ul.previousSibling
        nextBro = ul.nextSibling
        previousBroText = ul.previousElementSibling
        nextBroText = ul.nextElementSibling

        console.log(previousBro)
        console.log(nextBro)
        console.log(previousBroText)
        console.log(nextBroText)
        
        parent = ul.parentNode
        console.log(parent)

        all = child2[2].attributes
        console.log(all)
    </script>
</body>
</html>